var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var image= new Image();
image.src='photonew.jpg';
image.onload=function () {
    //加载图片到画布
    cxt.drawImage(image,0,0,image.width,image.height);
    // 获取图像的像素信息，并根据像素信息重新绘制出粒子，
    // canvas有一个叫getImageData的接口，通过该接口可以获取到画布上指定位置的全部像素的数据
    var imagedata=cxt.getImageData(0,0,image.width,image.height);
    calculate(imagedata);
    Animate();
}
/*
t: 动画执行到当前帧当前时间
b: begInnIng value,  开始值
c: change In value,  结束值 - 开始值（总的位移）
d: duration 总时间（持续时间）
*/
function easeInOutQuad(t,b,c,d) {
    t/=d/2;
    if(t<1)
    {
        return c/2*Math.pow(2,10*(t-1))+b;
    }
    t--;
    return c/2*(-Math.pow(2,-10*t)+2)+b;
}
//创建粒子数组
var particles=[];
//粒子对象
var Particle=function (x,y,pos,img) {
    //初始位置
    this.sx=200;
    this.sy=50;
    //目标位置
    this.tx=x;
    this.ty=y;
    //粒子半径
    this.radius=2;
    //当前帧数
    this.frameNum=0;
    //总的帧数
    this.frameCount=3;
    //播放完的标识符
    this.complete=false;
    //延迟标识//随机生成
    this.delay=this.frameCount*Math.random();
    this.delayCount=0;
    this.fillStyle = "rgba("+img.data[pos]+","+img.data[pos+1]+","+img.data[pos+2]+","+img.data[pos+3]+")";
    //更新位置
    this.update = function(){
        if(this.delay > this.delayCount){
            this.delayCount++;
            return;
        }
        if(this.frameNum < this.frameCount) {
            // 获取当前x轴位置
            this.frameCount=Math.floor(Math.random()*300)+10;
            this.cur_x = easeInOutQuad(this.frameNum, this.sx, this.tx - this.sx, this.frameCount);
            // 获取当前y轴位置
            this.cur_y = easeInOutQuad(this.frameNum, this.sy, this.ty - this.sy, this.frameCount);
            // 帧数+1
            this.frameNum += 1;
        }
        else
         {
            this.complete = true  //已经完成
        }
    }
    //画粒子，是圆形的
    this.draw = function(){
        cxt.save();
        cxt.beginPath();
        cxt.arc(this.cur_x, this.cur_y,3, 0, 2*Math.PI,false);
        cxt.fillStyle = this.fillStyle
        cxt.fill();
        cxt.restore();
    }
}
function  calculate(im) {
    for(var i=0;i<im.width;i=i+Math.floor(Math.random()*2)+2)
    {
        for(var j=0;j<im.height;j=j+Math.floor(Math.random()*2)+2)
        {
            var pos=(j*im.width+i)*4;
            if(im.data[pos]>=0)
            {
                var temp_particle=new Particle(i+500,j+20,pos,im);
                particles.push(temp_particle);
            }
        }
    }
}
var requestId;
function Animate() {
    cxt.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<particles.length;i=i+1)
    {
        particles[i].update();
        particles[i].draw();
    }
    //获取完成绘制的数量
    var complete_count=particles.filter(function (s) {
        return s.complete;
    }).length;
    if(complete_count>=particles.length){
       clearTimeout(requestId);
        return;
    }
    if(complete_count<particles.length)
    {
        requestId=setTimeout(Animate,20);
    }
}